<!--  -->
<template>
  <div class="product">
    <ul>
      <li v-for="(item,index) in goodsList"
          :key="index"
          @click="toProductDetail(item.id)">
        <img :src="item.list_pic_url"
             alt="">
        <div class="product-name">{{item.name}}</div>
        <div class="product-price">{{item.retail_price | fomartPrice}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  props: {
    goodsList: {
      type: Array,
      default () {
        return [];
      }
    }
  },
  methods: {
    toProductDetail (id) {
      //console.log(id);
      //1.通过queryString的方式传值
      this.$router.push("/productDetail?id=" + id);
      //2.刷新页面
      setTimeout(() => {
        this.$router.go(0);

      }, 100)
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style lang="less" scoped>
.product {
  background-color: #efefef;
  ul {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: center;

    li {
      flex: 49%;
      margin-bottom: 5px;
      margin-right: 3px;
      background-color: #fff;
      font-size: 16px;
      line-height: 16px;

      img {
        width: 100%;
      }
      .product-name {
        padding: 5px;
      }
      .product-price {
        padding: 5px;
        color: darked;
      }
    }
  }
}
</style>